HTML Web Workers API

ওয়েব ওয়ার্কার হল একটি বাহ্যিক জাভাস্ক্রিপ্ট ফাইল যা পৃষ্ঠার কর্মক্ষমতা প্রভাবিত না করেই ব্যাকগ্রাউন্ডে চলে।

একটি ওয়েব কর্মী কি?

HTML পৃষ্ঠায় স্ক্রিপ্ট চালানোর সময়, স্ক্রিপ্ট শেষ না হওয়া পর্যন্ত পৃষ্ঠাটি প্রতিক্রিয়াহীন হয়ে যায়।

ওয়েব ওয়ার্কার হল একটি বাহ্যিক জাভাস্ক্রিপ্ট ফাইল যা পৃষ্ঠার কর্মক্ষমতা প্রভাবিত না করেই অন্যান্য স্ক্রিপ্ট থেকে স্বাধীনভাবে ব্যাকগ্রাউন্ডে চলে। যখন ওয়েব কর্মী ব্যাকগ্রাউন্ডে চলছে, আপনি যেকোন কিছু করতে পারেন: ক্লিক করা, জিনিস নির্বাচন করা ইত্যাদি।

ওয়েব কর্মীরা ভারী কোডের জন্য দরকারী যা প্রধান থ্রেডে চলতে পারে না, যা দীর্ঘ টাস্কের কারণ হয় না যা পৃষ্ঠাটিকে প্রতিক্রিয়াহীন করে তোলে।

ব্রাউজার সমর্থন

টেবিলের সংখ্যাগুলি ওয়েব ওয়ার্কার্স API-কে সম্পূর্ণরূপে সমর্থন করার জন্য প্রথম ব্রাউজার সংস্করণকে উপস্থাপন করে৷

API	Chrome	Edge	Firefox	Safari	Opera
Web Workers	4.0	10.0	3.5	4.0	11.5

ওয়েব ওয়ার্কার্স এপিআই উদাহরণ

নীচের উদাহরণটি একটি সাধারণ ওয়েব কর্মী তৈরি করে যা পটভূমিতে সংখ্যা গণনা করে:

সংখ্যা গণনা করুন:

কর্মচারী ফলাফল এখানে প্রদর্শিত হবে...

দ্রষ্টব্য:

সাধারণত ওয়েব ওয়ার্কাররা এই ধরনের সহজ স্ক্রিপ্টের জন্য ব্যবহার করা হয় না, কিন্তু খুব CPU নিবিড় কাজের জন্য!

ওয়েব ওয়ার্কার API সমর্থন পরীক্ষা করুন

ওয়েব কর্মী মোতায়েন করার আগে, আসুন দ্রুত ব্রাউজার সমর্থন পরীক্ষা করি:

উদাহরণ

<script>
const x = document.getElementById("result");
if(typeof(Worker) !== "undefined") {
  x.innerHTML = "Your browser support Web Workers!";
} else {
  x.innerHTML = "Sorry, your browser does not support Web Workers.";
}
</script>

আপনার ব্রাউজার সমর্থন পরীক্ষা করুন:

এখানে ফলাফল প্রদর্শিত হবে...

একটি .js ওয়েব ওয়ার্কার ফাইল তৈরি করা হচ্ছে

এখন, একটি বহিরাগত জাভাস্ক্রিপ্ট ফাইলে একটি ওয়েব কর্মী তৈরি করা যাক।

এখানে আমরা একটি স্ক্রিপ্ট তৈরি করি যা গণনা করে। স্ক্রিপ্টটি "demo_workers.js" ফাইলে সংরক্ষিত আছে:

var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

দ্রষ্টব্য:

উপরে কোড প্রধান অংশpostMessage()পদ্ধতি - এটি একটি HTML পৃষ্ঠায় বার্তা পোস্ট করতে ব্যবহৃত হয়।

একটি ওয়েব ওয়ার্কার অবজেক্ট তৈরি করা

.js ওয়েব ওয়ার্কার ফাইল তৈরি করার পরে, এটি একটি HTML পৃষ্ঠা থেকে কল করা যেতে পারে।

নিম্নলিখিত লাইনগুলি পরীক্ষা করে যে একজন কর্মী (w) ইতিমধ্যেই বিদ্যমান আছে কিনা, অন্যথায় - এটি একটি নতুন ওয়েব ওয়ার্কার অবজেক্ট তৈরি করে এবং .js ফাইলের দিকে নির্দেশ করে: "demo_workers.js":

উদাহরণ

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

তারপর আমরা ওয়েব কর্মী থেকে বার্তা পাঠাতে এবং গ্রহণ করতে পারি।

ওয়েব কর্মীদের এবং প্রধান থ্রেডের মধ্যে বার্তাগুলির একটি সিস্টেমের মাধ্যমে ডেটা প্রেরণ করা হয় - উভয় পক্ষই তাদের বার্তাগুলি ভাগ করেpostMessage()পদ্ধতি ব্যবহার করে পাঠান, এবংonmessageইভেন্ট হ্যান্ডলারের মাধ্যমে বার্তার উত্তর দিন।

ওয়েব ওয়ার্কার অবজেক্টের জন্য একটিonmessageএকটি ইভেন্ট শ্রোতা যোগ করুন.

উদাহরণ

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

.js-এর ওয়েব কর্মী যখন একটি বার্তা পোস্ট করেন, তখন ইভেন্ট লিসেনারের ভিতরের কোডটি কার্যকর করা হয়। ওয়েব কর্মী থেকে ডেটাevent.dataমধ্যে সংরক্ষণ করা হয়.

ওয়েব কর্মীকে বরখাস্ত করা হচ্ছে

যখন একটি ওয়েব ওয়ার্কার অবজেক্ট তৈরি করা হয়, তখন এটি সম্পূর্ণ না হওয়া পর্যন্ত বার্তা শুনতে থাকে।

একটি ওয়েব ওয়ার্কার অবজেক্ট সম্পূর্ণ করতে এবং ব্রাউজার/কম্পিউটার রিসোর্স খালি করতে,terminate()পদ্ধতি ব্যবহার করুন:

উদাহরণ

w.terminate();

ওয়েব কর্মী পুনরায় ব্যবহার করা হচ্ছে

আপনি যদি ওয়েব ওয়ার্কার ভেরিয়েবলটিকে সমাপ্তির পরে অনির্ধারিত হিসাবে সেট করেন, আপনি কর্মী/কোডটি পুনরায় ব্যবহার করতে পারেন:

উদাহরণ

w = undefined;

সম্পূর্ণ ওয়েব কর্মী উদাহরণ

আমরা ইতিমধ্যেই .js ফাইলে ওয়েব ওয়ার্কার কোড দেখেছি।

নীচে HTML পৃষ্ঠার জন্য সম্পূর্ণ কোড আছে:

উদাহরণ

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  const x = document.getElementById("result");
  if (typeof(Worker) !== "undefined") {
    if (typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      x.innerHTML = event.data;
    };
  } else {
    x.innerHTML = "Sorry! No Web Worker support.";
  }
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

ওয়েব কর্মী এবং DOM

যেহেতু ওয়েব কর্মীরা বাহ্যিক .js ফাইলগুলিতে থাকে, তাদের নিম্নলিখিত জাভাস্ক্রিপ্ট অবজেক্টগুলিতে অ্যাক্সেস নেই:

উইন্ডো অবজেক্ট

অ্যাক্সেস করতে অক্ষম

নথি বস্তু

অ্যাক্সেস করতে অক্ষম

মূল বস্তু

অ্যাক্সেস করতে অক্ষম

দ্রষ্টব্য:

ওয়েব কর্মীরা সরাসরি DOM পরিবর্তন করতে পারে না। তাদের অবশ্যই বার্তা বিনিময়ের মাধ্যমে মূল থ্রেডের সাথে যোগাযোগ করতে হবে।

প্রধান থ্রেড বনাম ওয়েব কর্মী

প্রধান থ্রেড

UI ইন্টারফেস পরিচালনা করে
DOM-এ অ্যাক্সেস আছে
ব্যবহারকারী যোগাযোগের প্রতিক্রিয়া
দীর্ঘ কাজ পৃষ্ঠা নিষ্ক্রিয় করতে পারেন
অবিলম্বে হ্যান্ডলিং জন্য উপযুক্ত

ওয়েব কর্মী

ব্যাকগ্রাউন্ডে চলছে
DOM-এ অ্যাক্সেস নেই
ব্যবহারকারীর মিথস্ক্রিয়াকে বিরক্ত করে না
ভারী গণনা পরিচালনা করে
ডেটা প্রসেসিংয়ের জন্য উপযুক্ত

অনুশীলন করুন

❓নিচের কোন জাভাস্ক্রিপ্ট অবজেক্টে সরাসরি ওয়েব কর্মীরা প্রবেশ করতে পারে না?

Math object

✗ ভুল! গণিত বস্তু ওয়েব কর্মীদের দ্বারা অ্যাক্সেস করা যেতে পারে

document object

✓ ঠিক আছে! নথি বস্তু;

Array object

✗ ভুল! অ্যারে অবজেক্ট ওয়েব কর্মীদের দ্বারা অ্যাক্সেস করা যেতে পারে

পূর্ববর্তী পরবর্তী